<template>
    <div class="container-content detail">
        <div class="detail-container">
            <el-row>
                <el-col :span="24">
                    <h3 class="panel-title"></h3>
                </el-col>
            </el-row>
            <el-descriptions
                class="detail-descriptions"
                title="保证金详情"
                :column="1"
                border
                colon
            >
                <el-descriptions-item>
                    <template slot="label"> 保证金类型 </template>
                    <el-tag v-if="formObject.type === 1" type="success">交保证金</el-tag>
                    <el-tag v-else-if="formObject.type === 2" type="danger">退保证金</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 已审批通过的标书记录 </template>
                    {{ formObject.bidId || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 预计退还时间 </template>
                    {{ formObject.expectBackTime || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 客户 </template>
                    {{ formObject.customerId || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 付款方式 </template>
                    {{ formObject.payTypeId || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 投标基础信息 </template>
                    {{ formObject.tenderId || "--" }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 备注 </template>
                    {{ formObject.remarks || "--" }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>
<script>
import { getDetailEnsureList, deleteEnsure } from "@/api/system/tender";
export default {
    props:['rowId'],
    data() {
        return {
            formObject: {
            },
        };
    },
    methods: {
        getData(id) {
            getDetailEnsureList(id).then((res) => {
                if (res.code === 200) {
                    this.formObject = res.data
                }
            });
        },
    },
    created() {
        this.getData(this.rowId);
    },
};
</script>
<style lang="scss" scoped>
.detail-bg {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.detail {
    background: #f1f4f5;
    height: 100%;
}
.detail-container {
    width: 98%;
    margin: 1%;
    background: #fff;
    z-index: 3;
    position: relative;
    border-radius: 10px;
    padding: 20px;
}
.detail-descriptions {
    padding-left: 40px;
    padding-right: 40px;
}
::v-deep .el-descriptions-item__label.is-bordered-label {
    width: 20%;
}
</style>
